<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
    let ctx = document.getElementById('canvas');
    // 获取webgl上下文
    let gl = ctx.getContext('webgl')
    // 顶点着色器
    let VERTEX_SHADER_SOURCE = `
        void main(){
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            gl_PointSize = 100.0;
        }
    `;
    // 片元着色器  如果要绘制一个圆形的点，就要修改片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        precision lowp float;

        void main(){
            // 计算距离的方式 实现 圆形点
            float dis = distance(gl_PointCoord, vec2(0.5,0.5));
            // 如果距离 大于0.5 就是白色， 否则就是红色
            // if(dis>0.5){
            // 绘制圆环的 if
            // if( dis>0.5 || dis<0.4){
            // 绘制双圆环的 if
            if( dis>0.5 || (dis<0.4 && dis>0.3) || dis<0.2 ){
                // gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
                // 也可以 用 discard; 放弃绘制这个片元
                discard ;
            } else {
                // 参数 rgba
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        }
    `;
    let program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

    gl.drawArrays(gl.POINTS, 0, 1);


</script>
</html>
